| Vue | 您所在的位置：网站首页 › vue translate用法 › Vue |
Vue
|
前言
Vue 提供了 transition 的封装组件，任何元素和组件在下列四种情形中，都可以添加进入或离开过渡动画 条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点 一、transition用法元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 当插入或删除包含在 组件中的元素时，Vue 将会做以下处理： 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同) toggled content toggled content // 方法 methods: { transitionComplete(el) { // 传入'el'这个DOM元素作为参数。 } } 二、transition的属性常用属性： name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"appear: boolean，是否在初始渲染时使用过渡。默认为 false。css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。mode: string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。duration: number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 自定义过渡类名属性： enter-class: stringleave-class: stringappear-class: stringenter-to-class: stringleave-to-class: stringappear-to-class: stringenter-active-class: stringleave-active-class: stringappear-active-class: string【1】过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，则以你设置的name值作为过渡类名前缀。例如：那么 v-enter 会替换为 my-transition-enter。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 【2】自定义过渡的类名 我们可以通过以下属性来自定义过渡类名，他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。 enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) Toggle renderhello // js data() { return { show: true } } 三、transition的事件 methods:{ beforeEnter(el){ console.log('动画enter之前'); }, enter(el){ console.log('动画enter进入'); }, afterEnter(el){ console.log('动画进入之后'); }, beforeLeave(el){ console.log('动画leave之前'); }, leave(el){ console.log('动画leave'); }, afterLeave(el){ console.log('动画leave之后'); } } 四、transition-group是一个抽象组件，且只对单个元素生效。而 组件实现了列表的过渡，并且它会渲染一个真实的DOM元素节点，默认渲染 ，可以通过 tag 属性配置哪个元素应该被渲染。 注意，每个 的子节点必须有独立的 key，动画才能正常工作 【1】用法 {{ item.text }}【2】transition-group属性 tag: string，默认为 span move-class: 覆盖移动过渡期间应用的 CSS 类。 除了 mode，其他 attribute 和 相同 【3】transition-group事件 事件和 相同 五、实例【1】transiton展开收起侧边栏 {{txt}} 左侧边栏 export default { data() { return { show: true, } }, computed: { txt() { return this.show ? '收起' : '展开' } }, } .leftNav { height: 90vh; width: 200px; background-color: #ccc; } /*设置动画*/ .fade-enter, .fade-leave-to { transform: translateX(-100%); } .fade-enter-active, .fade-leave-active { transition: 1s; } .fade-enter-to { transform: translateX(0) }
【2】transiton-map实现多元素收缩展开 {{txt}} 1 2 3 4 export default { data() { return { show: true, } }, computed: { txt() { return this.show ? '收起' : '展开' } }, } .move-enter, .move-leave-to { transform: translateX(-100%); } .move-enter-active, .move-leave-active { transition: 1s; } .move-enter-to { transform: translateX(0) } .box { width: 200px; height: 100px; background: #ccc; margin-bottom: 2px; }
【3】transiton配合animation动画使用 从顶部滑入、顶部滑出 从顶部滑入、底部滑出 从底部滑入、顶部滑出 从底部滑入、底部滑出 从左侧滑入、右侧滑出 从左侧滑入、左侧滑出 从右侧滑入、左侧滑出 从右侧滑入、左侧滑出 Element export default { data() { return { transName: '', show: true, } }, methods: { play(name) { this.transName = name; this.show = !this.show; } } } .view { position: relative; height: 300px; width: 300px; background: gainsboro; overflow: hidden; } .block { position: absolute; height: 100%; width: 100%; text-align: center; color: white; line-height: 300px; background: red; } /*滑入——从顶部*/ @keyframes slideIn_top { 0% { top: -100%; } 100% { top: 0; } } /*滑入——从底部*/ @keyframes slideIn_bottom { 0% { top: 100%; } 100% { top: 0; } } /*滑入——从左侧*/ @keyframes slideIn_left { 0% { left: -100%; } 100% { left: 0; } } /*滑入——从右侧*/ @keyframes slideIn_right { 0% { left: 100%; } 100% { left: 0; } } /*滑出——从顶部*/ @keyframes slideOut_top { 0% { top: 0; } 100% { top: -100% } } /*滑出——从底部*/ @keyframes slideOut_bottom { 0% { top: 0; } 100% { top: 100% } } /*滑出——从左侧*/ @keyframes slideOut_left { 0% { left: 0; } 100% { left: -100% } } /*滑出——从右侧*/ @keyframes slideOut_right { 0% { left: 0; } 100% { left: 100% } } /*(滑入)——从顶部滑入,从顶部滑出*/ .topToTop-enter-active { animation: slideIn_top 1s; } /*(滑出)——从顶部滑入,从顶部滑出*/ .topToTop-leave-active { animation: slideOut_top 1s; } /*(滑入)——从顶部滑入,从底部滑出*/ .topToBottom-enter-active { animation: slideIn_top 1s; } /*(滑出)——从顶部滑入,从底部滑出*/ .topToBottom-leave-active { animation: slideOut_bottom 1s; } /*(滑入)——从底部滑入,从顶部滑出*/ .bottomToTop-enter-active { animation: slideIn_bottom 1s; } /*(滑出)——从底部滑入,从顶部滑出*/ .bottomToTop-leave-active { animation: slideOut_top 1s; } /*(滑入)——从底部滑入,从底部滑出*/ .bottomToBottom-enter-active { animation: slideIn_bottom 1s; } /*(滑出)——从底部滑入,从底部滑出*/ .bottomToBottom-leave-active { animation: slideOut_bottom 1s; } /*(滑入)——从左侧滑入,从右侧滑出*/ .leftToRight-enter-active { animation: slideIn_left 1s; } /*(滑出)——从左侧滑入,从右侧滑出*/ .leftToRight-leave-active { animation: slideOut_right 1s; } /*(滑入)——从左侧滑入,从左侧滑出*/ .leftToLeft-enter-active { animation: slideIn_left 1s; } /*(滑出)——从左侧滑入,从左侧滑出*/ .leftToLeft-leave-active { animation: slideOut_left 1s; } /*(滑入)——从右侧滑入,从左侧滑出*/ .rightToLeft-enter-active { animation: slideIn_right 1s; } /*(滑出)——从右侧滑入,从左侧滑出*/ .rightToLeft-leave-active { animation: slideOut_left 1s; } /*(滑入)——从右侧滑入,从右侧滑出*/ .rightToRight-enter-active { animation: slideIn_right 1s; } /*(滑出)——从右侧滑入,从右侧滑出*/ .rightToRight-leave-active { animation: slideOut_right 1s; }
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
|
【本文地址】